<template>
	
	<view class="bgbox" v-if="!tokeninfo.app_token&&!tokeninfo.rongyun_token">
		<un-navbar titleText="登录" bgColor="rgba(0,0,0,0)" :isBack="false"></un-navbar>
		<view class="flex justify_center">
			<image class="logos ma_top60"
				src="../../static/image/logo.png">
			</image>
		</view>



		<view class="flex align_center flex_column ma_top130">
			<view class="inputbox bo_radius20 flex align_center ov_hidden">
				<view class="usercode pa_lr24 fw_bold">
					+86
				</view>
				<input class="flex1 ma_left30" type="number" maxlength="11" v-model="info.phone_number"
					placeholder="请输入手机号" />
			</view>
			<view class="flex align_center flex_column ma_top30 ov_hidden">
				<view class="inputbox bo_radius20 flex align_center ov_hidden">
					<input class="flex1 ma_left30" maxlength="5" v-model="yzminfo.image_code" placeholder="请输入图形验证码" />
					<image :src="yzminfo.img" class="yzmimg" @click="catpchaget_catpcha_pics"></image>
				</view>
			</view>
			<view class="inputbox bo_radius20 flex align_center ma_top30 ov_hidden">
				<input class="flex1 ma_lr30" type="number" v-model="info.code" placeholder="请输入验证码" />
				<view class="useryzm pa_lr24 fw_bold zttecolor" @click="!state.tmenums?accountphonephone_codes():''">
					{{!state.tmenums?'获取验证码':state.tmenums}}
				</view>
			</view>
		</view>
		<view class="flex justify_center ma_top100">
			<view class="btnbox f_s32 te_white flex align_center justify_center" @click="loginfun">
				登录
			</view>
		</view>
		<view class="ma_top40">
			<view class="te_black9 f_s24 flex justify_center align_center">
				<view class="isydclass ma_right10 flex align_center justify_center" @click="isread=!isread"
					:class="isread?'isydclass2':''"><i class="iconfont i-duigou te_white f_s22" v-if="isread"></i>
				</view>我已阅读并同意<text class="te_black3" @click="goWebview(1)">《用户协议》</text>和<text class="te_black3" @click="goWebview(2)">《隐私政策》</text>
			</view>
		</view>


		<!-- <te-st titleText="我的"></te-st> -->
	</view>
	<view v-else class="flex align_center justify_center">
		<view style="height: 600upx;" class="flex justify_center align_center f_s34">加载中...</view>
	</view>
</template>

<script setup lang="ts">
	import { showToast, openSetting, getLocation, mToKm, getToday, getParam } from '@/utils/utils'
	import { catpchaget_catpcha_pic, accountphonephone_code, accountphonelogin } from '@/api/login'
	import { friendcontact_user_avatar } from '@/api/chat'
	import { onLoad, onShow ,onUnload} from '@dcloudio/uni-app'
	import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const tokeninfo = reactive<any>({
		app_token: uni.getStorageSync('app_token'),
		rongyun_token: uni.getStorageSync('rongyun_token')
	})
	
	if (uni.getStorageSync('app_token') && uni.getStorageSync('rongyun_token')) { 
		uni.switchTab({
			url: '/pages/chat/index'
		})
	}
	
	onUnload(()=>{
		clearInterval(state.timefun)
		state.tmenums = null
	})
	
	const info = reactive<any>({
		phone_number: null,
		session_id: null,
		code: null
	})

	const state = reactive<any>({
		tmenums: null,
		timefun: null
	})

	const catpchaget_catpcha_pics = () => {
		catpchaget_catpcha_pic().then(res => {
			console.log(res)
			yzminfo.catpcha_session_id = res.data.catpcha_session_id
			yzminfo.img = res.data.img
		})
	}

	const accountphonephone_codes = () => {
		if (!info.phone_number) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
				duration: 2000,
				mask: true
			});
			return
		}
		if (!yzminfo.image_code) {
			uni.showToast({
				title: '请输入图形验证码',
				icon: 'none',
				duration: 2000,
				mask: true
			});
			return
		}
		accountphonephone_code({
			phone_number: info.phone_number,
			image_code: yzminfo.image_code,
			catpcha_session_id: yzminfo.catpcha_session_id
		}).then(res => {
			console.log(res)
			info.session_id = res.data.session_id
			state.tmenums = 59
			state.timefun = setInterval(() => {
				if (state.tmenums == 1) {
					console.log(state.tmenums)
					state.tmenums = null
					clearInterval(state.timefun)

				} else {
					state.tmenums--
				}
			}, 1000)
		}).catch(res => {
			console.log(1111111111)
			catpchaget_catpcha_pics()
		})
	}


	catpchaget_catpcha_pics()
	const isread = ref<any>(false)

	const yzminfo = reactive<any>({
		image_code: null,
	})


	const loginfun = () => {
		if (!info.phone_number) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
				duration: 2000,
				mask: true
			});
			return
		}
		if (!yzminfo.image_code) {
			uni.showToast({
				title: '请输入图形验证码',
				icon: 'none',
				duration: 2000,
				mask: true
			});
			return
		}
		if (!info.code) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none',
				duration: 2000,
				mask: true
			});
			return
		}
		if (!isread.value) {
			 // showToast('请阅读并同意用户协议和隐私政策')
			uni.showToast({
				title: '请阅读并同意用户协议和隐私政策',
				icon: 'none',
				duration: 2000,
				mask: true
			});
			return
		}
		accountphonelogin(info).then(res => {
			console.log("accountphonelogin--------------",res)
			uni.setStorageSync('app_token', res.data.app_token)
			uni.setStorageSync('rongyun_token', res.data.rongyun_token)
			let myinfo = {
				user_name_cn: res.data.user_name_cn,
				avatar: res.data.avatar
			}
			uni.setStorageSync('myinfo', myinfo)
			store.dispatch("init")
			// friendcontact_user_avatar().then(res=>{
			// 	console.log('好友信息好友信息好友信息好友信息好友信息好友信息好友信息',res)
			// })
			uni.switchTab({
				url: '/pages/chat/index'
			})
		})

	}



	const carouselImage = ref<any>([{ url: 'https://img2.baidu.com/it/u=3542937904,3859707051&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' }])

	const goWebview = (e:any) => {
		uni.navigateTo({
			url: '/subPackages/my/setup/protocol?type='+e
		})
	}
	onLoad((e) => {


	})
	onShow(() => {



	})
</script>
<style>
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>

<style scoped lang="scss">
	$ztcolor: #39C7C1;

	.zttecolor {
		color: $ztcolor;
	}

	.ztbgcolor {
		background-color: $ztcolor;
	}


	.bgbox {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #DAFEFF 0%, #FFFFFF 50%, #FFFFFF 100%);

		.logos {
			width: 240upx;
			height: 240upx;
			border-radius: 50%;
		}

		.inputbox {
			width: 600upx;
			height: 96upx;
			background: #F5F5F5;

			.usercode {
				// font-weight: 600;
				border-right: 1upx solid #D8D8D8;
			}
		}

		.btnbox {
			width: 600upx;
			height: 96upx;
			background: #39C7C1;
			font-weight: 500;
			border-radius: 48upx;
		}

		.btnbox2 {
			background: $ztcolor ;
		}

		.isydclass {
			width: 24upx;
			height: 24upx;
			border: 2upx solid #CDCDCD;
			border-radius: 8upx;
		}

		.isydclass2 {
			border: 2upx solid $ztcolor;
			background: $ztcolor;
		}

		.yzmimg {
			width: 220upx;
			height: 90upx;
		}
	}
</style>